<template>
    <div class="plate-input-page" ref="cntRef" @click="onFocus">
        <div class="input-content" :class="{ focus: isFocus }">
            <div class="placeholder" v-if="!value">请输入车牌</div>
            <div class="value-content" v-else>{{ value }}</div>
            <i
                class="iconfont icon-close-circle"
                :class="{ show: value }"
                @click="onClear"
            />
        </div>
        <div class="plate-content" :class="{ show: isFocus }" ref="el">
            <div class="provinces-content">
                <template v-if="!value.length">
                    <div
                        class="item"
                        v-for="item in provinces"
                        :key="item"
                        @click="onNumber(item)"
                    >
                        {{ item }}
                        <div class="tooltip">{{ item }}</div>
                    </div>
                </template>
                <template v-else>
                    <div
                        class="item"
                        :class="{
                            disabled: isDisabled(item) || isAllDisabled,
                        }"
                        v-for="item in numbers"
                        :key="item"
                        @click="onNumber(item)"
                    >
                        {{ item }}
                        <div class="tooltip">{{ item }}</div>
                    </div>
                </template>
                <div class="item delete" @click="onDelete">
                    <i class="iconfont icon-arrowleft"></i>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { computed, ref, toRefs } from "vue";
import { onClickOutside } from "@vueuse/core";

const cntRef = ref(null);

const props = defineProps({
    value: {
        type: String,
        default: () => "",
    },
});

const { value } = toRefs(props);

const emits = defineEmits(["update:value"]);

const isFocus = ref(false);

onClickOutside(cntRef, () => {
    isFocus.value = false;
});

const el = ref(null);

const provinces = [
    "京",
    "沪",
    "粤",
    "津",
    "冀",
    "晋",
    "蒙",
    "辽",
    "吉",
    "黑",
    "苏",
    "浙",
    "皖",
    "闽",
    "赣",
    "鲁",
    "豫",
    "鄂",
    "湘",
    "桂",
    "琼",
    "渝",
    "川",
    "贵",
    "云",
    "藏",
    "陕",
    "甘",
    "青",
    "宁",
    "新",
];

let number = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
let special = ["学", "挂", "警"];

const numbers = [
    ...number,
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "J",
    "K",
    "L",
    "M",
    "N",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    ...special,
];

//点击了容器
const onFocus = () => {
    isFocus.value = true;
};

const isAllDisabled = computed(() => {
    let _res = false;
    special.map((v) => {
        if (props.value.indexOf(v) > -1) {
            _res = true;
        }
    });
    return _res;
});

const isDisabled = (val) => {
    let _res = false;
    if (props.value.length === 1 && number.includes(val)) {
        _res = true;
    }
    if (props.value.length >= 8) {
        _res = true;
    }
    if (special.includes(val)) {
        if (props.value.length < 6) {
            _res = true;
        }
        special.map((v) => {
            if (props.value.indexOf(v) > -1) {
                _res = true;
            }
        });
    }
    return _res;
};

//点击车牌数字
const onNumber = (val) => {
    if(isDisabled(val)) return;
    let _res = false;
    if (props.value.length === 1 && number.indexOf(val) > -1) {
        return;
    }
    special.map((v) => {
        if (props.value.indexOf(v) > -1) {
            _res = true;
        }
    });
    if (_res) return;
    if (props.value.length >= 8) return;
    let _value = props.value + val;

    emits("update:value", _value);
};

//点击删除
const onDelete = () => {
    if (!props.value) return;
    let _value = props.value.substring(0, props.value.length - 1);
    emits("update:value", _value);
};

//点击清除按钮
const onClear = () => {
    emits("update:value", "");
};
</script>
<style lang="less" scoped>
.plate-input-page {
    position: relative;
    .input-content {
        height: 32px;
        box-sizing: border-box;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 0 8px;
        display: flex;
        align-items: center;
        box-shadow: none;
        transition: all 0.2s;
        .iconfont {
            position: absolute;
            right: 8px;
            font-size: 15px;
            color: #999;
            cursor: pointer;
            transform: scale(0);
            transition: all 0.25s ease-in-out;
            &.show {
                transform: scale(1);
            }
        }
        .placeholder {
            color: var(--placeholder-color);
            pointer-events: none;
        }
        &.focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 2px var(--primary-color);
        }
        &:not(.focus) {
            .value-content::after {
                display: none;
            }
        }
        .value-content {
            position: relative;
            letter-spacing: 1px;
            &::after {
                content: "";
                position: absolute;
                width: 1px;
                height: 18px;
                background: var(--primary-color);
                top: 50%;
                right: -2px;
                transform: translateY(-50%);
                animation: focusBorder 1.2s ease-in-out infinite;
            }
        }
    }
    .plate-content {
        position: absolute;
        top: calc(100% + 4px);
        border: 1px solid var(--border-color);
        background: var(--bg-color-1);
        padding: 12px 12px;
        border-radius: var(--border-radius);
        box-shadow: 1px 1px 2px var(--border-color);
        transform: scale(0);
        transform-origin: top left;
        transition: all 0.25s ease-in-out;
        z-index: 9999;
        &.show {
            transform: scale(1);
        }
        .provinces-content {
            display: grid;
            grid-template-columns: repeat(10, minmax(36px, 36px));
            grid-gap: 10px 10px;
            align-items: center;
            .item {
                width: 36px;
                height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                border: 1px solid var(--border-color);
                box-shadow: 1px 1px 2px var(--border-color);
                // border-radius: var(--border-radius);
                border-radius: 3px;
                cursor: pointer;
                transition: all 0.2s ease-in-out;
                user-select: none;
                position: relative;
                .tooltip {
                    display: none;
                    position: absolute;
                    bottom: calc(100% + 5px);
                    background: #777;
                    width: 100%;
                    height: 100%;
                    padding: 4px;
                    align-items: center;
                    justify-content: center;
                    transition: none;
                    border-radius: var(--border-radius);
                    color: #fff;
                    font-size: 18px;
                }
                &:hover {
                    background-color: var(--primary-color);
                    color: #fff;
                    .tooltip {
                        display: flex;
                    }
                }
                &.disabled {
                    cursor: not-allowed;
                    background-color: var(--bg-color-2);
                    color: var(--text-color-base-2);
                }
                &.delete {
                    width: auto;
                    grid-column-start: span 2;
                    grid-area: 4/9/5/11;
                    background-color: var(--primary-color);
                    color: #fff;
                }
                i {
                    font-size: 18px;
                }
            }
        }
    }
}

@keyframes focusBorder {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
</style>
